<template>
  <div
    class="div-alert-placeholder alert"
    :class="`alert-${alertData.type}`"
    :style="{opacity:opacity}"
    v-if="alertData.show"
    role="alert"
  >
    {{ alertData.message }}
  </div>
</template>

<script>
export default {
    props:{
        alertData:{
            type:Object,
            required:true
        },
        opacity:{
            type:Number,
            required:true
        }
    }
}
</script>

<style scoped lang="scss">
@import "../../App";

.div-alert-placeholder {
  position: fixed;
  top: calc(#{$navbar-height} + 10px);
  left: 50%;

  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);

  transform: translateX(-50%);
  z-index: $z-index-alert;
}
</style>